<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 700px;
      height: 400px;
      background-color: pink;
    }

  </style>
</head>

<body>
  <div class="box">
    <p>2401抽奖会</p>
    <h1>一等奖：<span class="one">???</span></h1>
    <h2>二等奖：<span class="two">???</span></h2>
    <h3>三等奖：<span class="three">???</span></h3>
  </div>

  <script>

    const personArr = ['祝航欣', '吴子杰', '梅越', '徐一敏', '胡云飞']
    // const arr = ['one', 'two', 'three']

    //for循环方法
    for (let i = 0; i < 3; i++) {
      const ran = Math.floor(Math.random() * personArr.length)
      // const span = document.querySelector('.' + arr[i])
      const span = document.querySelectorAll('span')
      span[i].innerHTML = personArr[ran]
      personArr.splice(ran, 1)
    }
    console.log(personArr)

    //一等奖
    // const ran1 = Math.floor(Math.random() * personArr.length)
    // // console.log(ran)
    // const span1 = document.querySelector('.one')
    // span1.innerHTML = personArr[ran1]
    // personArr.splice(ran1, 1)
    // console.log(personArr)

    // //二等奖
    // const ran2 = Math.floor(Math.random() * personArr.length)
    // const span2 = document.querySelector('.two')
    // span2.innerHTML = personArr[ran2]
    // personArr.splice(ran2, 1)
    // console.log(personArr)

    // //三等奖
    // const ran3 = Math.floor(Math.random() * personArr.length)
    // const span3 = document.querySelector('.three')
    // span3.innerHTML = personArr[ran3]
    // personArr.splice(ran3, 1)
    // console.log(personArr)



  </script>
</body>

</html>